
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../global/masterpage.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <f:loadBundle basename="labels" var="labels"/>
    <f:loadBundle basename="messages" var="msgs"/>
    <ui:define name="title">
        <h:outputText value="#{labels.invoice}"/>
    </ui:define>
    <ui:define name="content">
        <p:growl id="mesages"/>
        <h:form>

            <p:dataTable style="padding: 5px" var="car" id="tbl"  value="#{tableBean.cars}" paginator="true" rows="10"
                         selection="#{tableBean.selectedCar}" selectionMode="single"
                         onRowSelectUpdate="display" onRowSelectComplete="detail.show()">

                <f:facet name="header">
                <h:outputText value="Lista de Carros" />
                </f:facet>
               
                <p:column selectionMode="multiple" />
                <p:column sortBy="#{car.model}" filterBy="#{car.model}">
                    <f:facet name="header">
                        <h:outputText value="Model" />
                    </f:facet>
                    <h:outputText value="#{car.model}" />
                </p:column>

                <p:column sortBy="#{car.year}" filterBy="#{car.year}">
                    <f:facet name="header">
                        <h:outputText value="Year" />
                    </f:facet>
                    <h:outputText value="#{car.year}" />
                </p:column>

                <p:column sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}">
                    <f:facet name="header">
                        <h:outputText value="Manufacturer" />
                    </f:facet>
                    <h:outputText value="#{car.manufacturer}" />
                </p:column>

                <p:column sortBy="#{car.color}" filterBy="#{car.color}">
                    <f:facet name="header">
                        <h:outputText value="Color" />
                    </f:facet>
                    <h:outputText value="#{car.color}" />
                </p:column>

            </p:dataTable>
           </h:form>
        <h:panelGrid columns="5" style=" text-align: left;margin-right: 3px; font-weight: bold;" >
                        <h:form >
                            <p:commandButton value="New" image="ui-icon-plusthick" oncomplete="detail.show()" update="messages" />
                        </h:form>
            <h:form>
                            <p:commandButton value="Remove Seleteds" image="ui-icon-closethick" oncomplete="delDialog.show()" update="messages"/>
            </h:form>
            <h:form>
                <p:commandButton value="Search" image="ui-icon-search" oncomplete="detail.show()" style="width: 29    px;height: 29px" />
            </h:form>
            <h:form>
                   <h:commandLink style="text-decoration: none; color: #999999; padding-top:5px; margin-left: 5px ">
                       <h:graphicImage value="#{facesContext.externalContext.context.contextPath}/../resources/images/pdf.jpg" height="25px" width="25px"/>
                                <p:dataExporter  type="pdf" target="tbl"  fileName="cars"  />
                            </h:commandLink>
            </h:form>
                <h:form>
                    <h:commandLink style="text-decoration: none; color: #999999; padding-top:5px; margin-left: 5px ">
                                <h:graphicImage value="#{facesContext.externalContext.context.contextPath}/../resources/images/excel.png" height="25px" width="25px"/>
                                <p:dataExporter  type="xls" target="tbl"  fileName="cars"  />
                            </h:commandLink>
                </h:form>
        </h:panelGrid>

        <p:dialog header="Car Detail" widgetVar="detail" resizable="false"
                  width="500" styleClass="dialogs" modal="true"  showEffect="explode" hideEffect="explode" position="button" draggable="true" appendToBody="true" >

                <h:panelGrid id="display" columns="2" cellpadding="4">

                    <f:facet name="header">
                        <p:graphicImage value="/images/cars/#{tableBean.selectedCar.manufacturer}.jpg"/>
                    </f:facet>

                    <h:outputText value="Model:" />
                    <h:outputText value="#{tableBean.selectedCar.model}" />

                    <h:outputText value="Year:" />
                    <h:outputText value="#{tableBean.selectedCar.year}" />

                    <h:outputText value="Manufacturer:" />
                    <h:outputText value="#{tableBean.selectedCar.manufacturer}" />

                    <h:outputText value="Color:" />
                    <h:outputText value="#{tableBean.selectedCar.color}" />
                                       <h:outputText value="Color:" />
                    <h:outputText value="#{tableBean.selectedCar.color}" />                   <h:outputText value="Color:" />
                    <h:outputText value="#{tableBean.selectedCar.color}" />                   <h:outputText value="Color:" />
                </h:panelGrid>
            </p:dialog>
  
        <p:confirmDialog widgetVar="delDialog" modal="false" width="350" closable="false" header="Eliminar Registros"
                                     message="Esta seguro que desea eliminar los registros seleccionados ?" showEffect="bounce" hideEffect="explode">
                        <h:form>
                            <p:commandButton value="Si" update="messages" oncomplete="delDialog.hide()"/>
                            <p:commandButton value="No" onclick="delDialog.hide()" type="button" />
                        </h:form>
        </p:confirmDialog>
    </ui:define>

    <ui:define name="left">

        <p:panel style="margin-top: 5px">

        </p:panel>

        <p:panel  style="margin-top: 5px">

        </p:panel>
        <p:panel>
                        <h:outputText value="#{labels.location}" style="font-size: small"/>
                        <!-- hr style="background: #fcbf46;border-left-color: #fcbf46;border-style: solid ;border-color: #fcbf46;" /-->
                            <p:gmap center="18.480454,-69.958266" zoom="15" type="ROADMAP" style="width:100%;height:300px;border: solid 1px #fcbf46"/>
                        
                        <p:lightBox iframe="true" width="65%" height="85%">
                            <h:outputLink value="gmap.xhtml" title="#{labels.sicflexGMap}, #{labels.sicflexNameCurrentYear}">
                                <h:outputText value="#{labels.showBig}"/>
                            </h:outputLink>
                        </p:lightBox>
                    </p:panel>
                    
    </ui:define>

</ui:composition>
